<template>
  <div class="app-container">
    <div class="machine">
      <div
        v-for="(item, i) in options"
        :key="i"
        class="silder"
        @click="handlerIsSwitch(item)"
        :class="value == item.value ? 'bottom-line' : null"
      >
        {{ item.label }}
      </div>
    </div>
    <component :is="componentName" />
  </div>
</template>

<script>
import Recumbent from "./components/Recumbent.vue";
import Clean from "./components/clean.vue";
import Temper from "./components/temper.vue";
import Edge from "./components/edge.vue";
import Cat from "./components/cat.vue";
import Stage from "./components/stage.vue";
import Shard from "./components/shard.vue";
import catB from "./components/catB.vue";
import kongLine from "./components/kongLine.vue";
import TemperAfter from "./components/temperAfter.vue";
import cage from "./components/cage.vue";
import doubleCage from "./components/doubleCage.vue";
import { setSignal } from "@/api/assembly/cage";
import { labelList } from "./Config/label";

export default {
  name: "Device",
  components: {
    Recumbent,
    Clean,
    Temper,
    Edge,
    Cat,
    Stage,
    Shard,
    catB,
    kongLine,
    TemperAfter,
    cage,
    doubleCage,
  },
  data() {
    return {
      options: labelList,
      value: sessionStorage.getItem("checkId") * 1 || 1,
      isCheckCard: 0,
      dialogVisible: false,
      componentName: sessionStorage.getItem("componentName") || 'Recumbent',
      formLabelAlign: {
        id: null,
        db: null,
        params: null,
      },
    };
  },
  created() {
    let value = this.$route.params.radio;
    if (value) {
      this.value = value;
    }
  },
  mounted() {},
  methods: {
    // index 选中的card
    handlerisCheck(index) {
      this.isCheckCard = index;
    },
    handlerIsSwitch(item) {
      this.value = item.value;
      this.componentName = item.componentName;
      window.sessionStorage.setItem("checkId", this.value);
      window.sessionStorage.setItem("componentName", this.componentName);
    },
    sendPlc() {
      let params = {
        plcId: this.formLabelAlign.id,
        db: this.formLabelAlign.db,
        value: this.formLabelAlign.params,
      };
      this.$modal
        .confirm("请确认是否强制发送信号")
        .then(function () {
          setSignal(params).then((res) => {
            that.$message({
              type: "success",
              message: res.msg,
            });
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  height: 100%;
  padding: 0px !important;
  overflow: hidden;
}

.machine {
  position: relative;
  min-height: 40px;
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  align-items: center;
  .silder {
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 0px 15px;
    margin-right: 5px;
    transform: translateY(1px);
  }

  .tips {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
    letter-spacing: 1.5px;
    font-size: 16px;
  }

  .bottom-line {
    // border-bottom: 2px solid #409eff;
    background: linear-gradient(#fafafa, #1890ff);
  }
  .silder:hover {
    border-bottom: 2px solid #409eff;
  }

  .recument-no {
    width: 100%;
    height: 50px;
  }
}

.Recumbent_item_btn {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  background-color: #fff;
}

.device-btn {
  position: absolute;
  top: 25vh;
  left: 89%;
}

.item-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  border: 1px dashed #e6e6e6;

  .sub-title {
    width: 100%;
    height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .glass-number {
      height: 100%;
      margin-left: auto;
      font-size: 14px;
      display: flex;
      align-items: flex-end;

      .number {
        font-size: 18px;
        font-weight: bold;
        transform: translateY(2px);
        margin-left: 10px;
      }
    }
  }

  .device-list,
  .device-action,
  .log-content {
    flex: 1;
    padding: 0 10px;
  }

  .log-content {
    display: flex;
    flex-direction: column;

    .item {
      height: 40px;
      display: flex;
      flex-direction: column;

      .content {
        font-size: 14px;
        color: red;
      }
    }
  }
}

.device-views {
  flex: 1.5;
  display: flex;
  flex-direction: column;

  .device-img {
    flex: 1;
    padding: 10px;

    img {
      width: 100%;
      height: 90%;
    }
  }
}

.elBtn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
</style>
